<template>
  <div>
    <el-dialog
      @close="handleClose"
      :lock-scroll="false"
      close-on-press-escape
      v-dialogDrag
      title="添加设备类型"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
    >
      <el-tabs :tab-position="tabPosition" class="tabHight">
        <el-tab-pane label="详情">
          <el-form
            :model="deviceForm"
            :rules="deviceRules"
            ref="deviceForm"
            size="mini"
            class="tabHight_auto"
            label-width="80px"
          >
            <el-form-item label="Token:" prop="token">
              <el-input
                v-model="deviceForm.token"
                placeholder="请输入"
              ></el-input>
            </el-form-item>

            <el-form-item label="名称:" prop="name">
              <el-input
                v-model="deviceForm.name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>

            <el-form-item label="描述:" prop="description">
              <el-input
                type="textarea"
                v-model="deviceForm.description"
                placeholder="请输入描述"
              ></el-input>
            </el-form-item>

            <el-form-item label="容器策略:" prop="containerPolicy">
              <el-radio-group v-model="deviceForm.containerPolicy">
                <el-radio label="Standalone">设备</el-radio>
                <el-radio label="Composite">设备组</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="图像:" prop="imageUrl">
              <div style="width: 100%">
                <el-row>
                  <el-col :span="6">
                    <app-upload
                      tips=""
                      :is-resolution="true"
                      :width="720"
                      :height="294"
                      @subUploadSucceed="handleUploadSucceed"
                    />
                  </el-col>
                  <el-col :span="18">
                    <div class="imageHome" v-if="showImg">
                      <img
                        v-if="deviceForm.imageUrl"
                        :src="deviceForm.imageUrl | filtersFileUrl()"
                        class="image-size"
                      />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="元数据">
          <MetaData
            :editmetaData="editmetaData"
            :isedit="isedit"
            @sendmetaDatas="sendmetaData"
          />
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button
          :loading="btnLoading"
          size="mini"
          type="primary"
          @click="submitForm('deviceForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MetaData from ".././../opensite/metaData.vue";
import AppUpload from "../devicegroups/UploadImage.vue";
import { TOKEN_RULES } from "@/utils/local";
import { createDeviceTypes } from "@/api/deviceType";
export default {
  props: {
    adddevicetype: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    MetaData,
    AppUpload,
  },
  data() {
    return {
      btnLoading: false,
      showDialog: false,
      tabPosition: "left",
      deviceForm: {
        name: "",
        token: "",
        description: "",
        containerPolicy: "",
        imageUrl: "",
      },
      metaDataJson: {},
      devicetypesData: {},
      editmetaData: [],
      isedit: false, //true为编辑页进入，false为添加页进入
      deviceRules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 0,
            max: 15,
            message: "长度在 0 到 15 个字符",
            trigger: "blur",
          },
        ],
        token: TOKEN_RULES,
        imageUrl: [{ required: true, message: "请上传图片", trigger: "blur" }],
        containerPolicy: [
          { required: true, message: "请选择容器策略", trigger: "change" },
        ],
      },
    };
  },
  mounted() {},
  computed: {
    showImg: function () {
      return this.deviceForm.imageUrl != "";
    },
  },
  watch: {
    adddevicetype(oldVal, newVal) {
      this.showDialog = this.adddevicetype;
    },
  },
  methods: {
    // 弹窗关闭改变参数
    handleClose() {
      this.$emit("changeShow", "false");
    },
    // 取消添加窗口
    cancel() {
      this.$emit("changeShow", "false");
      this.showDialog = false;
      this.deviceForm = {
        name: "",
        token: "",
        description: "",
        containerPolicy: "",
        imageUrl: "",
      };
    },

    // 提交
    submitForm(deviceForm) {
      this.$refs[deviceForm].validate((valid) => {
        if (valid) {
          let deviceForm = {};
          deviceForm.name = this.deviceForm.name;
          deviceForm.token = this.deviceForm.token;
          deviceForm.description = this.deviceForm.description;
          deviceForm.containerPolicy = this.deviceForm.containerPolicy;
          deviceForm.imageUrl = this.deviceForm.imageUrl;

          deviceForm.metadata = this.metaDataJson;
          this.btnLoading = true;
          createDeviceTypes(deviceForm)
            .then((res) => {
              console.log("res :>> ", res);
              const { data } = res;
              this.devicetypesData = data;
              this.$msg({
                type: "success",
                message: "操作成功!",
              });
              this.deviceForm = {
                name: "",
                token: "",
                description: "",
                containerPolicy: "",
                imageUrl: "",
              };
              this.showDialog = false;
            })
            .finally((f) => {
              this.btnLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleUploadSucceed(url) {
      this.deviceForm.imageUrl = url;
    },

    //元数据页回传
    sendmetaData(md) {
      this.metaDataJson = md;
    },
  },
};
</script>

<style lang="scss" scoped>
.imageHome {
  padding: 5px 5px 5px 5px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 2px;
  .image-size {
    width: 94px;
    height: 94px;
    /*background: #2E2E2E;*/
    border-radius: 50%;
    opacity: 1;
    display: flex;
  }
}
</style>
